<template>
  <div class="mat-notes">
    <div class="notes-pane">
      <div class="title-bar">
        <span class="title"> 笔记 </span>
        <span class="right">
          <el-popover placement="left-start" width="200" trigger="hover" v-model="showSectionSelector">
            <ri i="add" slot="reference"></ri>
            <div class="menu-selector">
              <div class="menu-item" v-for="(s, i) in scopeSections" :key="i" @click="sectionSelected(s)">
                {{ s.name }}
              </div>
            </div>
          </el-popover>
        </span>
      </div>
      <scroller height="80vh">
        <div>
          <div class="editor-pane" v-show="showEditor">
            <note-editor :context="context" :section="section" :value="note" @close="showEditor = false"></note-editor>
          </div>
          <div class="note-section" v-if="context.scope != $C.NoteScope.Article">
            <div class="note-section-title grey">已选内容</div>
            <div class="note-ref" v-show="!isCodeFile">
              {{ context.content }}
            </div>
            <div class="code-line" :class="codeLang"></div>
          </div>
          <note-section class="note-section" v-for="(sec, i) in scopeSections" :key="i" :notes="notes" :section="sec"></note-section>
          <div v-if="context.mat.kind == $C.MatKind.Poem" class="note-section">
            <div class="note-section-title">参考</div>
            <div class="note-list">
              <mat-ref :scope="context.scope" :kind="context.mat.kind" :name="context.content"></mat-ref>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { MatFormat, NoteScope } from "@js/constants.js";
import NoteSection from "../notes/NoteSection.vue";
import NoteEditor from "../notes/editors/NoteEditor.vue";
import MatRef from "./MatRef.vue";

import hljs from "highlight.js";

export default {
  components: {
    MatRef,
    NoteSection,
    NoteEditor
  },
  props: ["context"],
  data() {
    return {
      filterType: "all",
      noteType: "note",
      isFav: false,
      editorText: "",
      note: {
        content: "",
      },
      notes: [],
      showSectionSelector: false,
      showEditor: false,
      section: { id: 0 },
      sections: [],
    };
  },
  computed: {
    codeLang() {
      let paths = this.$route.path.split(".");
      if (paths.length > 0) {
        return paths[1];
      } else {
        return "txt";
      }
    },
    isCodeFile() {
      return this.context.mat.format == MatFormat.File;
    },
    scopeSections() {
      return this.sections.filter((s) => s.scope == this.context.scope);
    },
  },
  watch: {
    "context.content": {
      handler() {
        this.hightlighSelectedCode();
        this.loadNotes();
      },
    },
  },
  created() {
    this.loadSections();
  },
  methods: {
    sectionSelected(s) {
      this.section = s;
      this.showSectionSelector = false;
      this.showEditor = true;
    },
    loadNotes() {
      if (!this.context.mat || !this.context.mat.id) return;
      this.authGet(
        "/api/v1/notes/list/cards?mid=" +
          this.context.mat.id +
          "&scope=" +
          NoteScope.Article
      )
        .then((res) => {
          this.notes = res.data;
        })
        .catch((e) => console.log(e));
    },
    loadSections() {
      this.$axios.get("/api/v1/notes/sections/all").then((res) => {
        console.log("sections:", res.data);
        this.sections = res.data;
      });
    },
    hightlighSelectedCode() {
      if (this.context.content && this.context.mat.format == MatFormat.File) {
        for (let codespan of this.$el.getElementsByClassName("code-line")) {
          codespan.textContent = this.context.content;
          hljs.highlightBlock(codespan);
        }
      }
    },
    editNote(note) {
      console.log("try to edit note:", note);
    },
  },
};
</script>


<style lang="stylus">
.note-section
  margin-bottom 30px
  .note-ref
    border 1px solid #D9ECFF
    border-radius 2px
    box-shadow 0 2px 6px 0 #D9ECFF
    background-color #F7FBFF
    padding 10px 20px
    font-weight bold
    font-size 1.2em
    color #080400
    margin-top 10px

  .note-section-title
    padding 0.5vh 0.5vw
    margin-bottom 0.5vh
    border-bottom 1px dotted #eee
    font-size 0.9em
    color #999

    .note-toolbar
      margin-right 20px

    .note-type-filter
      margin-left 20px
      float right

    svg
      margin-left 6px
      color #409EFF
      cursor pointer

    svg.red
      color #F66

    .right
      float right

    .sort-by
      font-weight normal
      color #999

  .note-editor
    border 1px dotted #ddd
    border-radius 5px
    padding 15px
    background-color #f7fbff

    div
      margin-bottom 10px

    .note-editor-title
      font-weight bold
      margin-bottom 10px

.menu-selector
  .menu-item
    height 2.2vh
    line-height 2.2vh
    padding 5px 1vw
    border-bottom 1px solid #eee
    cursor pointer

    &:hover
      background-color #eee
      
.editor-pane
  width 100%
  height 500px
  z-index 100
  // position absolute
  // top 50px

</style>